<template>
	<view>
		<cu-custom :bgColor="globalColor" :isBack="true">
		    <block slot="content">教程</block>
		</cu-custom>
		<ad v-if="showAd" :unit-id="ad" ad-type="video" ad-theme="white"></ad>
		<view class="grace-rich-text">
			<rich-text type="text" :nodes="demoHtml"></rich-text>
		</view>
	</view>
</template>
<script>
var _self;
var graceRichText = require("../../utils/richText.js");
export default {
	data() {
		return {
			demoHtml : "",
			contentId :'',
			ad:'',
			showAd:false,
			globalColor: getApp().globalData.globalColor
		};
	},
	onLoad:function(options){
		this.ad = getApp().globalData.toolAd
		this.showAd = true
		var that = this;
		that.contentId = options.conId;
		uni.request({
			url:that.$reqUrl+'/content/getParseContentInfo?conId='+that.contentId,
			success:function(res){	
				// 强化 richText
				that.demoHtml = graceRichText.format(res.data.data);
			},
			fail(res) {
				uni.showToast({
					title:'服务器维护中',
					icon:'loading'
				})
			}
		});
		// 在页面中定义插屏广告
		let interstitialAd = null
		
		// 在页面onLoad回调事件中创建插屏广告实例
		if (wx.createInterstitialAd) {
		  interstitialAd = wx.createInterstitialAd({
		    adUnitId: getApp().globalData.parseAdCard
		  })
		  interstitialAd.onLoad(() => {})
		  interstitialAd.onError((err) => {})
		  interstitialAd.onClose(() => {})
		}
		
		// 在适合的场景显示插屏广告
		if (interstitialAd) {
		  interstitialAd.show().catch((err) => {
		    console.error(err)
		  })
		}
	},
	methods:{
		
	}
}
</script>
<style>
view{font-size:28upx;}
.grace-rich-text{padding:10upx 30upx;}

.tui-loadmore {
		width: 48%;
		margin: 1.5em auto;
		line-height: 1.5em;
		font-size: 24upx;
		text-align: center;
	}

	.tui-loading-1 {
		margin: 0 5px;
		width: 20px;
		height: 20px;
		display: inline-block;
		vertical-align: middle;
		-webkit-animation: a 1s steps(12) infinite;
		animation: a 1s steps(12) infinite;
		background: transparent url() no-repeat;
		background-size: 100%;
	}

	@-webkit-keyframes a {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		to {
			-webkit-transform: rotate(1turn);
			transform: rotate(1turn);
		}
	}

	@keyframes a {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		to {
			-webkit-transform: rotate(1turn);
			transform: rotate(1turn);
		}
	}

	.tui-loadmore-tips {
		display: inline-block;
		vertical-align: middle;
	}

	.tui-loading-2 {
		width: 28upx;
		height: 28upx;
		border: 1px solid #8f8d8e;
		border-radius: 50%;
		margin: 0 6px;
		display: inline-block;
		vertical-align: middle;
		clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 0% 30%);
		animation: rotate 1s linear infinite;
	}

	@-webkit-keyframes rotate {
		from {
			transform: rotatez(0deg);
		}

		to {
			transform: rotatez(360deg);
		}
	}

	@keyframes rotate {
		from {
			transform: rotatez(0deg);
		}

		to {
			transform: rotatez(360deg);
		}
	}

	.tui-loading-3 {
		display: inline-block;
		margin: 0 6px;
		vertical-align: middle;
		width: 28upx;
		height: 28upx;
		background: 0 0;
		border-radius: 50%;
		border: 2px solid;
		border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
		animation: tui-rotate 0.7s linear infinite;
	}

	.tui-loading-3.tui-loading-primary {
		border-color: #e5e5e5 #e5e5e5 #e5e5e5 #5677fc;
	}

	.tui-loading-3.tui-loading-green {
		border-color: #e5e5e5 #e5e5e5 #e5e5e5 #19be6b;
	}

	.tui-loading-3.tui-loading-orange {
		border-color: #e5e5e5 #e5e5e5 #e5e5e5 #ff7900;
	}

	.tui-loading-3.tui-loading-red {
		border-color: #ededed #ededed #ededed #ed3f14;
	}

	@-webkit-keyframes tui-rotate {
		0% {
			transform: rotate(0);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes tui-rotate {
		0% {
			transform: rotate(0);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>